// clear float
@mixin clearfix {
  clear: both;
  &::after {
    display: block;
    content: "";
    clear: both;
  }
}

// nav 分割线
@mixin divider($color: #e5e5e5) {
  height: 1px;
  margin: 10px 0;
  overflow: hidden;
  background-color: $color;
}

// Triangle helper mixin
// @param {Direction} $direction - Triangle direction, either `top`, `right`, `bottom` or `left`
// @param {Color} $color [currentcolor] - Triangle color
// @param {Length} $size [1em] - Triangle size
@mixin triangle($direction, $color, $size) {
  width: 0;
  height: 0;
  content: '';
  z-index: 2;
  font-size:0;
  border-#{$direction}: $size solid $color;

  $perpendicular-borders: $size solid transparent;

  @if $direction == top or $direction == bottom {
    border-left:   $perpendicular-borders;
    border-right:  $perpendicular-borders;
  } @else if $direction == right or $direction == left {
    border-bottom: $perpendicular-borders;
    border-top:    $perpendicular-borders;
  }
}
@mixin opacity($opacity) {
  opacity: $opacity;
  filter:alpha(opacity=$opacity*100);
}

// Only display content to screen readers
// See: http://a11yproject.com/posts/how-to-hide-content
@mixin sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  border: 0;
}
// Use in conjunction with .sr-only to only display content when it's focused.
// Useful for "Skip to main content" links; see https://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/G1
// Credit: HTML5 Boilerplate
@mixin sr-only-focusable {
  &:active,
  &:focus {
    position: static;
    width: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    clip: auto;
  }
}

// center block
@mixin center-block() {
  position:relative;
  display: block;
  width:1000px;
  margin: 0 auto;
}

// text overflow
@mixin text-overflow {
  overflow: hidden;
  text-overflow: ellipsis;
  -o-text-overflow: ellipsis;
  white-space: nowrap;
}

// position relative absolute and fixed
@mixin position($position, $args) {
  @each $o in top right bottom left {
        $i: index($args, $o);

    @if $i and $i + 1 <= length($args) and type-of(nth($args, $i + 1)) == number  {
          #{$o}: nth($args, $i + 1);
    }
  }
  position: #{$position};
}
@mixin absolute($args) {
  @include position("absolute", $args);
}
@mixin fixed($args) {
  @include position("fixed", $args);
}
@mixin relative($args) {
  @include position("relative", $args);
}

// Lists
// Unstyled keeps list items block level, just removes default browser padding and list-style
@mixin list-unstyled {
  padding-left: 0;
  list-style: none;
}

// Horizontal dividers
//
// Dividers (basically an hr) within dropdowns and nav lists
@mixin nav-divider($color: #e5e5e5) {
  height: 1px;
  margin: ($spacer-y / 2) 0;
  overflow: hidden;
  background-color: $color;
}

// Only display content to screen readers
// See: http://a11yproject.com/posts/how-to-hide-content
@mixin sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  border: 0;
}
// Use in conjunction with .sr-only to only display content when it's focused.
// Useful for "Skip to main content" links; see https://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/G1
// Credit: HTML5 Boilerplate
@mixin sr-only-focusable {
  &:active,
  &:focus {
    position: static;
    width: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    clip: auto;
  }
}

// Sizing shortcuts
@mixin size($width, $height: $width) {
  width: $width;
  height: $height;
}

// Generate cup grid
@mixin make-cup($name: container, $left: $container-cup-left, $right: $container-cup-right) {
  .#{$name}-cup {
    .cup-main {
      float: left;
      width: 100%;
      .inner {
        min-width: $container-width-base - $left -$right;
        @if $left {
          margin-left: $left;
        }
        @if $right {
          margin-right: $right;
        }
      }
    }
    @if $left {
      .cup-left {
        float: left;
        width: $left;
        margin-left: -100%;
      }
    }
    @if $right {
      .cup-right {
        float: left;
        width: $right;
        margin-left: -$right;
      }
    }
  }
}

// diplay inline block
@mixin display-inline-block {
    display: inline-block;
    *display: inline;
    zoom: 1;
}

// WebKit-style focus
@mixin tab-focus() {
  // WebKit-specific. Other browsers will keep their default outline style.
  // (Initially tried to also force default via `outline: initial`,
  // but that seems to erroneously remove the outline in Firefox altogether.)
  outline: 5px auto -webkit-focus-ring-color;
  outline-offset: -2px;
}

// Tags
@mixin badge-variant($color) {
  background-color: $color;

  &[href] {
    @include hover-focus {
      background-color: darken($color, 10%);
    }
  }
}


// Single side border-radius
@mixin border-radius($radius: $border-radius) {
  @if $enable-rounded {
    border-radius: $radius;
  }
}

@mixin border-top-radius($radius) {
  @if $enable-rounded {
    border-top-right-radius: $radius;
    border-top-left-radius: $radius;
  }
}

@mixin border-right-radius($radius) {
  @if $enable-rounded {
    border-bottom-right-radius: $radius;
    border-top-right-radius: $radius;
  }
}

@mixin border-bottom-radius($radius) {
  @if $enable-rounded {
    border-bottom-right-radius: $radius;
    border-bottom-left-radius: $radius;
  }
}

@mixin border-left-radius($radius) {
  @if $enable-rounded {
    border-bottom-left-radius: $radius;
    border-top-left-radius: $radius;
  }
}

// Form validation states
//
// Used in _forms.scss to generate the form validation CSS for warnings, errors,
// and successes.

@mixin form-control-validation($color) {
  // Color the label and help text
  .form-control-feedback,
  .form-control-label,
  .col-form-label,
  .form-check-label,
  .custom-control {
    color: $color;
  }

  // Set the border and box shadow on specific inputs to match
  .form-control {
    border-color: $color;
  }

  // Set validation states also for addons
  .input-group-addon {
    color: $color;
    border-color: $color;
    background-color: lighten($color, 40%);
  }
}
// Form control focus state
//
// Generate a customized focus state and for any input with the specified color,
// which defaults to the `@input-border-focus` variable.
//
// We highly encourage you to not customize the default value, but instead use
// this to tweak colors on an as-needed basis. This aesthetic change is based on
// WebKit's default styles, but applicable to a wider range of browsers. Its
// usability and accessibility should be taken into account with any change.
//
// Example usage: change the default blue border and shadow to white for better
// contrast against a dark gray background.
@mixin form-control-focus() {
  &:focus {
    color: $input-color-focus;
    background-color: $input-bg-focus;
    border-color: $input-border-focus;
    outline: none;
  }
}

// Form control sizing
//
// Relative text size, padding, and border-radii changes for form controls. For
// horizontal sizing, wrap controls in the predefined grid classes. `<select>`
// element gets special love because it's special, and that's a fact!

@mixin input-size($parent, $input-height, $padding-y, $padding-x, $font-size, $line-height, $border-radius) {
  #{$parent} {
    height: $input-height;
    padding: $padding-y $padding-x;
    font-size: $font-size;
    line-height: $line-height;
  }

  select#{$parent} {
    height: $input-height;
    line-height: $input-height;
  }

  textarea#{$parent},
  select[multiple]#{$parent} {
    height: auto;
  }
}

// hover focus
@mixin hover {
  // TODO: re-enable along with mq4-hover-shim
//  @if $enable-hover-media-query {
//    // See Media Queries Level 4: https://drafts.csswg.org/mediaqueries/#hover
//    // Currently shimmed by https://github.com/twbs/mq4-hover-shim
//    @media (hover: hover) {
//      &:hover { @content }
//    }
//  }
//  @else {
    &:hover { @content }
//  }
}

@mixin hover-focus {
  @if $enable-hover-media-query {
    &:focus { @content }
    @include hover { @content }
  }
  @else {
    &:focus,
    &:hover {
      @content
    }
  }
}
@mixin plain-hover-focus {
  @if $enable-hover-media-query {
    &,
    &:focus {
      @content
    }
    @include hover { @content }
  }
  @else {
    &,
    &:focus,
    &:hover {
      @content
    }
  }
}